"use client";
import { debounce } from "@/libs/util";
import { Popover, Spin, message } from "antd";
import React from "react";
import { RankingTypeBtnText, RankingTypeText } from "../../constant";
import "./index.css";

interface RankingItem {
    id: number;
    wechatName: string;
    createUserAvatar?: string;
    avatar?: string;
    createUser?: string;
    name?: string;
    subjectCount?: number;
    count?: number;
}

interface RankingBoxProps {
    isLoading?: boolean;
    currentActive?: number;
    rankingType: number;
    contributionList: RankingItem[];
    onHandleRanking?: (index: number) => void;
    onHandleJump?: () => void;
}

const rankingBackImg = {
    0: "/assets/ranking1Img.png",
    1: "/assets/ranking2Img.png",
    2: "/assets/ranking3Img.png",
    3: "/assets/rankingImg.png",
    4: "/assets/clickImg.png",
};

const RankingBox: React.FC<RankingBoxProps> = ({
    isLoading = false,
    currentActive = 0,
    rankingType,
    contributionList = [],
    onHandleRanking,
    onHandleJump,
}) => {
    const tabList = [
        {
            tab: "总榜",
            key: "total",
        },
    ];

    const handleRankingClick = (index: number) => {
        debounce(() => {
            onHandleRanking && onHandleRanking(index);
        });
    };

    const handleJump = debounce(() => {
        onHandleJump ? onHandleJump() : message.info("敬请期待");
    });

    return (
        <div className="ranking-list-box">
            <div className="ranking-list-header">
                <div className="ranking-list-title">
                    {RankingTypeText[rankingType]}
                </div>
                <div className="ranking-list-btns">
                    {tabList.map((item, index) => (
                        <div
                            key={`${rankingType}_${item.key}`}
                            onClick={() => handleRankingClick(index)}
                            className={`ranking-list-btn ${
                                currentActive === index
                                    ? "ranking-list-btn-active"
                                    : ""
                            }`}
                        >
                            {item.tab}
                        </div>
                    ))}
                </div>
            </div>

            <Spin spinning={isLoading}>
                <div className="ranking-list">
                    {contributionList.map((item, index) => (
                        <div
                            className="ranking-item"
                            key={`${item.id}-${index}`}
                        >
                            <div className="ranking-left">
                                <div
                                    className="ranking-icon"
                                    style={{
                                        backgroundImage: `url(${
                                            index <= 2
                                                ? rankingBackImg[index]
                                                : rankingBackImg[3]
                                        })`,
                                    }}
                                >
                                    {index > 2 && index + 1}
                                </div>
                                <div className="ranking-head-img">
                                    <img
                                        src={
                                            item.createUserAvatar || item.avatar
                                        }
                                        className="ranking-head-icon"
                                        alt={
                                            item.createUser ||
                                            item.name ||
                                            "用户头像"
                                        }
                                    />
                                </div>
                                <Popover
                                    title={<div>{item.createUser}</div>}
                                    content={
                                        <div className="tooltip-info">
                                            <div>
                                                {item.createUser || item.name}
                                            </div>
                                        </div>
                                    }
                                >
                                    <div className="ranking-info">
                                        <div className="ranking-name">
                                            {item.createUser || item.name}
                                        </div>
                                    </div>
                                </Popover>
                            </div>
                            <div className="ranking-right">
                                🔥 {item.subjectCount || item.count}
                            </div>
                        </div>
                    ))}
                </div>
            </Spin>

            <div className="ranking-btn-go" onClick={handleJump}>
                <div
                    className="ranking-btn-go-icon"
                    style={{
                        backgroundImage: `url(${rankingBackImg[4]})`,
                    }}
                />
                <div className="ranking-btn-text">
                    {RankingTypeBtnText[rankingType]}
                </div>
            </div>
        </div>
    );
};

export default RankingBox;
